<!-- 我是首页 -->
<template>
  <div>
    <HeadBu />
    <div id="outDiv">
      <div id="grade" >
        <el-button style="letter-spacing: 2px" @click="chooseClass('one')">一年级</el-button>
        <el-button style="letter-spacing: 2px" @click="chooseClass('two')">二年级</el-button>
        <el-button style="letter-spacing: 2px" @click="chooseClass('three')">三年级</el-button>
        <el-button style="letter-spacing: 2px" @click="chooseClass('four')">四年级</el-button>
        <el-button style="letter-spacing: 2px" @click="chooseClass('five')">五年级</el-button>
        <el-button style="letter-spacing: 2px" @click="chooseClass('six')">六年级</el-button>
      </div>
    </div>
    <div id="content">
    <Subject id="one"/>
    <SubjectTwo id="two"/>
    <SubjectThree id="three"/>
    <SubjectFour id="four"/>
    <SubjectFive id="five"/>
    <SubjectSix id="six"/>
  </div>
  <div id="kong"></div>
  </div>
</template>

<script>
import HeadBu from "@/components/Head/head2.vue";
import Subject from "@/components/Subject/subject.vue";
import SubjectTwo from "@/components/Subject/subjectTwo.vue";
import SubjectThree from "@/components/Subject/subjectThree.vue";
import SubjectFour from "@/components/Subject/subjectFour.vue";
import SubjectFive from "@/components/Subject/subjectFive.vue";
import SubjectSix from "@/components/Subject/subjectSix.vue";
export default {
  components: {HeadBu, Subject, SubjectTwo, SubjectThree, SubjectFour, SubjectFive, SubjectSix },
  mounted(){
    let arr= document.getElementsByTagName("button");
    let flag=true;
    Array.from(arr).forEach(item=>{
      if(item.style.order==-1){
        flag=false;
      }
    })
    if(flag){
        arr[0].focus()
    }
  },
  methods:{
    chooseClass(item){
      document.getElementById("one").style.order=0;
      document.getElementById("two").style.order=0;
      document.getElementById("three").style.order=0;
      document.getElementById("four").style.order=0;
      document.getElementById("five").style.order=0;
      document.getElementById("six").style.order=0;
      document.getElementById(item).style.order=-1;
    }
  }
};
</script>

<style lang="less" scoped>
// body{
//   height: 100%;
// }
#outDiv {
  overflow: hidden;
}
#grade {
  margin-top: 2vh;
  display: flex;
  height: 8vh;
  overflow-x: scroll;
}
#grade::-webkit-scrollbar {
  display: none;
}
#content{
  display: flex;
  flex-wrap: wrap;
  // transition-delay: 0.5;
  // transition: flex 0.2s linear 0;
}
#kong{
  height: 10vh;
}
#one,#two,#three,#four,#five,#six{
  order: 0;
  transition: flex 1s linear 0;
}
</style>